<route lang="jsonc" type="page">{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "登录",
    "navigationStyle": "custom"
  }
}</route>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { tabbarStore } from '@/tabbar/store'
import { onLoad } from '@dcloudio/uni-app'

const protocol = ref(false)
onLoad((option) => {
  //是否从其他端跳转
  if (option.userInfo) {
    const userInfo = JSON.parse(decodeURIComponent(option.userInfo))
    handleLogin(userInfo.token)
  }
})
// 处理协议选择变化
function onProtocolChange(e) {
  protocol.value = e.detail.value.length > 0
}
const formData = ref({
  // username: '18373481952',
  // password: 'eisoo.com',
  username: '',
  password: '',
  source: 9,
})
function goRegister() {
  uni.navigateTo({
    url: '/pages/register',
  })
}
// 用户协议
function privacy(type) {
  uni.navigateTo({
    url: "/pages-sub/privacy/privacy?type=" + type,
  });
}

// 登录方法
async function handleLogin(token) {
  console.log(token, 'token');

  //有token跳过校验
  if (!token) {
    // 表单验证
    if (!formData.value.username) {
      uni.showToast({
        title: '请输入手机号',
        icon: 'none',
      })
      return
    }
    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(formData.value.username)) {
      uni.showToast({
        title: '请输入正确的账号格式',
        icon: 'none',
      })
      return
    }

    if (!formData.value.password) {
      uni.showToast({
        title: '请输入密码',
        icon: 'none',
      })
      return
    }
    if (!protocol.value) {
      uni.showToast({
        title: '请确认隐私协议',
        icon: 'none',
      })
      return
    }
  }
  try {
    const userStore = useUserStore()
    userStore.login(token || formData.value).then((res) => {
      // // 延迟跳转到首页
      setTimeout(() => {
        // 获取页面栈信息
        const pages = getCurrentPages()
        if (pages.length > 1) {
          // 如果有上一页，返回上一页
          uni.navigateBack()
        }
        else {
          // 没有上一页，跳转到首页
          uni.setStorageSync('app-tabbar-index', 0)
          tabbarStore.setCurIdx(0)
          const homeUrl = '/pages/index/index'
          uni.switchTab({
            url: homeUrl,
          })
        }
      }, 1500)
    })
  }
  catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: error.data?.message || '登录失败，请稍后重试',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="relative">
    <view class="mt-[260rpx] w-full" style="display: flex;justify-content: center;">
      <image src="/static/images/login.png" mode="widthFix" style="width: 520rpx;" class="w-full" />
    </view>
    <!-- <view class="pt-[450rpx]"></view> -->
    <view class="relative rounded-t-[48rpx] bg-white px-[48rpx] pt-[130rpx]">
      <!-- 手机号输入 -->
      <view class="mt-[20rpx]">
        <text class="text-[36rpx] text-[#333] fw-800">账号</text>
        <view class="mt-[40rpx] text-[32rpx]">
          <wd-input v-model="formData.username" type="text" placeholder-class="text-[#999] text-[30rpx]"
            placeholder="请输入您的账号" />
        </view>
      </view>
      <!-- 密码输入 -->
      <view class="mt-[80rpx]">
        <text class="text-[32rpx] text-[#333] fw-800">密码</text>
        <view class="relative mt-[40rpx] text-[32rpx]">
          <wd-input v-model="formData.password" show-password placeholder-class="text-[#999] text-[30rpx] "
            placeholder="请输入您的密码" />
          <!-- <text class="absolute right-5 top-[50%] translate-y-[-50%] text-[#FF770D] text-[28rpx] z-10"
            @click="goPassword()">
            忘记密码？
          </text> -->
        </view>
      </view>
      <!-- 登录按钮 -->
      <button class="mt-[80rpx] h-[96rpx] rounded-[8rpx] bg-[#FF770D] text-[32rpx] text-white leading-[96rpx]"
        @click="handleLogin('')">
        登录
      </button>
      <view class="protocol">
        <checkbox-group @change="onProtocolChange">
          <label class="checkbox-label">
            <checkbox :checked="protocol" color="#FF770D" />
            <text class="checkbox-text">已阅读并同意 <text class="main-color" @click="privacy('user')">《用户协议》</text> 与<text
                class="main-color" @click="privacy('privacy ')">《隐私协议》</text></text>
          </label>
        </checkbox-group>
      </view>
      <!-- 注册链接 -->
      <!-- <view class="text-center mt-[48rpx]">
        <text class="text-[#999] text-[28rpx]">没有账号？</text>
        <text @click="goRegister" class="text-[#999] text-[28rpx] underline leading-[32rpx]">
          去注册
        </text>
      </view> -->
    </view>
  </view>
</template>

<style scoped>
.protocol {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  color: #999999;
  font-size: 24rpx;
}

.protocol ::v-deep .tn-checkbox__label {
  color: #080808 !important;
}

.protocol ::v-deep .tn-checkbox__icon-wrap--checked {
  background-color: #ff770d !important;
  border-color: #ff770d !important;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
}

.checkbox-text {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

.main-color {
  color: #FF770D;
}
</style>
